<template>
    <div class="layout">
        <!-- 左侧导航区域 -->
        <MyMenu refs="MyMenu" class="menu" :isCollapse='isCollapse'/>
        <!-- 右侧内容区域 -->
        <MyContent refs="MyContent" class="content" :class="{isActive:isCollapse}" @changeCollapse='changeCollapse' :isCollapse='isCollapse'/>
    </div>
  </template>
  
  <script>
  import MyMenu from './Layout/Menu.vue'
  import MyContent from './Layout/Content.vue'
  export default {
      components:{
          MyMenu,
          MyContent
      },
      data(){
          return {
              isCollapse:false,
          }
      },
      methods:{
          changeCollapse(){
              this.isCollapse = !this.isCollapse;
          }
      }
  }
  </script>
  
  <style lang='less' scoped>
  .layout{
      .menu{
          // width: 200px;
          // min-height: 500px;
          background: rgb(217, 217, 217);
          position: fixed;
          top:0;
          bottom:0;
      }
      .content{
          margin-left: 200px;
          transition: all 0.3s;
      }
      .isActive{
          margin-left: 64px;
      }
  }
  
  </style>